import React, { useEffect, useState } from 'react';
import http from '../utils/request';
import fosterCss from './fostercss.module.css';
import { BrowserRouter as Router,useNavigate} from 'react-router-dom'
// 定义 banner 数据类型
interface BannerItem {
    id: number;
    imgUrl: string;
}

// 定义 zoo 数据类型
interface ZooItem {
    id: number;
    name: string;
    xing: number;
    area: string;
    km: string;
    imgUrl: string;
}

const Foster: React.FC = () => {
    let navigate=useNavigate()
    // 定义 banner 状态
    const [banner, setBanner] = useState<BannerItem[]>([
        { id: 1, imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.Dst5HpwLdFNFBaGf87p3egHaEi?rs=1&pid=ImgDetMain' },
        { id: 2, imgUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.xceYexK_4LBNwTsM-g8cSAHaHa?rs=1&pid=ImgDetMain' },
        { id: 3, imgUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.Vh-3GaLsFOqpSdfNgggKUwHaKX?rs=1&pid=ImgDetMain' },
    ]);

    // 定义 zoo 状态
    const [zoo, setZoo] = useState<ZooItem[]>([
        { id: 1, name: '萌宠联盟基地', xing: 80, area: '丰台长丰园和顺家园底商B23-89', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
        { id: 2, name: '萌宠幼稚园', xing: 80, area: '丰台长丰园和顺家园底商B23-89', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
        { id: 3, name: 'AMT猫咪生活馆', xing: 80, area: '丰台长丰园和顺家园底商B23-89', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
        { id: 4, name: '葫芦狗狗托管班', xing: 80, area: '丰台长丰园和顺家园底商B23-89', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
        { id: 5, name: '萌宠联盟基地', xing: 80, area: '丰台长丰园和顺家园底商B23-89', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
        { id: 6, name: '萌宠幼稚园', xing: 80, area: '丰台长丰园和顺家园底商B23-89', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
        { id: 7, name: 'AMT猫咪生活馆', xing: 100, area: '丰台长丰园和顺家园底商B23-89', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
        { id: 8, name: '葫芦狗狗托管班', xing: 80, area: '丰台长丰园和顺家园底商B23-89', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
    ]);

    // 当前显示的图片索引
    const [currentIndex, setCurrentIndex] = useState<number>(0);

    // 自动轮播功能
    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentIndex((prevIndex) => (prevIndex + 1) % banner.length);
        }, 3000); // 每 3 秒切换一次图片

        return () => clearInterval(interval);
    }, [banner]);

    // 点击指示点切换图片
    const handleDotClick = (index: number): void => {
        setCurrentIndex(index);
    };

    // 根据评分生成星星
    const generateStars = (rating: number) => {
        const starCount = Math.round(rating / 20); // 100 分对应 5 颗星
        const stars = [];
        for (let i = 0; i < 5; i++) {
            if (i < starCount) {
                stars.push(<span key={i} className={fosterCss.star}>★</span>);
            } else {
                stars.push(<span key={i} className={fosterCss.star}>☆</span>);
            }
        }
        return stars;
    };

    return (
        <div>
            {/* 头部导航 */}
            <header className={fosterCss.heder}>
                <div>
                    <img onClick={()=>{navigate('/layout/homeList')}}
                        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.qm9jJuyieNkBLse7ZyX2ZwHaGL?rs=1&pid=ImgDetMain"
                        alt=""
                        width='40px'
                    />
                </div>
                <div>
                    <h3 style={{ marginLeft: '-50px' }}>寄养</h3>
                </div>
                <div></div>
            </header>
            {/* 主体内容 */}
            <div className={fosterCss.main}>
                {/* 轮播图 */}
                <div className={fosterCss.slider}>
                    <img
                        src={banner[currentIndex].imgUrl}
                        alt={`Banner ${currentIndex + 1}`}
                        className={fosterCss.sliderImg}
                    />
                    {/* 指示点 */}
                    <div className={fosterCss.dots}>
                        {banner.map((_, index) => (
                            <span
                                key={index}
                                className={`${fosterCss.dot} ${index === currentIndex ? fosterCss.activeDot : ''}`}
                                onClick={() => handleDotClick(index)}
                            ></span>
                        ))}
                    </div>
                </div>
                <div className={fosterCss.mainTop}>
                    <h2>推荐门店</h2>
                    <div style={{ marginBottom: '100px' }}>
                        {/* 循环渲染zoo列表 */}
                        {zoo.map((item) => (
                            <div key={item.id} className={fosterCss.listOne}>
                                <span className={fosterCss.listOneImg}>
                                    <img src={item.imgUrl} alt={item.name} />
                                </span>
                                <span className={fosterCss.listOneText}>
                                    <div className={fosterCss.listOneTitle}>
                                        <span className={fosterCss.Namecss}>{item.name}</span>
                                        <span><button className={fosterCss.listZi}>资讯</button></span>
                                    </div>
                                    <div>{generateStars(item.xing)}</div>
                                    <span style={{fontSize:'12px'}}> {item.area}</span><br />
                                    <span style={{fontSize:'12px'}}>📍{item.km}</span>
                                </span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Foster;